<template>
    <div id="paymoney">
		<view class="uni-padding-wrap uni-common-mt">
			<form>
				<view class="uni-form-item uni-column">
					<text class="title">账户余额</text>
					<text class="right_text">{{seller_money}}</text>
				</view>
				<div class="tishi pay_alert">
					<p>请选择充值金额</p>
					<p class="firstmoney" v-if="has_recharge==0">首次充值金额10000元起</p>
				</div>
				<ul class="payways_ul">
					<li v-for="(item,index) in firstmoney" :key="index" @click="changemoney(item.value,index)" :class="{'moneyd': isactive == index}"  v-if="has_recharge==0">
						{{ item.text }}
						<span v-if="item.value>0">元</span>
						<i class="iconfont iconjiaobiao"/>
					</li>
					<li v-for="(item,index) in money" :key="index" @click="changemoney(item.value,index)" :class="{'moneyd': isactive == index}"  v-if="has_recharge==1">
						{{ item.text }}
						<span v-if="item.value>0">元</span>
						<i class="iconfont iconjiaobiao"/>
					</li>
				</ul>
				<view class="uni-form-item uni-column" v-if="showRecharge">
					<text class="title">充值金额(元)</text>
					<input class="uni-input" name="withdradesc" type="number" v-model="amount" placeholder="请输入金额" />
				</view>
				<view class="uni-form-item uni-column" >
					<text class="title beizhu">备注(50字)</text>
					<textarea v-model="seller_note" placeholder="选填"  :maxlength="50" class="sellernote"></textarea>
				</view>
			</form>
		</view>
		<div class="rule">
			<p>余额支付规则</p>
			<p>·充值的余额可用于平台订单中抢单</p>
			<p>·再次充值金额只能为500的倍数</p>
			<p>·如有疑义，请咨询平台</p>
		</div>
		<div class="applypay" @click="Submission">提交充值</div>
    </div>
</template>

<script>
export default {
	name: 'cashRechange',
	data() {
		return {
			seller_money: 0,
			amount: 0,
			integral: 0,
			seller_note: '',
			payway: '',
			pay_id: 17,
			showPicker: false,
			columns: [],
			buytype: '',
			showRecharge: false,
			isactive: -1,
			money: [
				{ text: '5000', value: 5000 },
				{ text: '10000', value: 10000 },
				{ text: '20000', value: 20000 },
				{ text: '30000', value: 30000 },
				{ text: '50000', value: 50000 },
				{ text: '自定义金额', value: 0 }
			],
			firstmoney: [
				{ text: '10000', value: 10000 },
				{ text: '15000', value: 15000 },
				{ text: '20000', value: 20000 },
				{ text: '30000', value: 30000 },
				{ text: '50000', value: 50000 }
			],
			isWxMiniapp: '',
			has_recharge: ''
		}
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		this.seller_money = opcation.seller_money
		this.has_recharge = opcation.has_recharge
	},
	mounted() {

	},
	methods: {
		changemoney(value, index) {
			this.isactive = index
			if (value == 0) {
				this.showRecharge = true
				this.amount = ''
				this.integral = 0
			} else {
				this.showRecharge = false
				this.amount = value
				this.integral = value * 10
			}
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		Submission() {
			if (this.has_recharge == 0) {
				if (this.amount < 10000) {
					this.msg('首次充值金额不能低于10000')
				} else {
					this.chongzhi()
				}
			} else {
				if (this.amount <= 0) {
					this.msg('充值金额不能为0')
				} else if (this.amount % 500 !== 0) {
					this.msg('当前充值金额不为500的整数倍,请重新输入')
				} else {
					this.chongzhi()
				}
			}
		},
		chongzhi() {
			const params = {
				amount: this.amount,
				pay_id: 17
			}
			uni.navigateTo({
				url: `/pages/page/payMent/main?from=Recharge&requestParams=${JSON.stringify(params)}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.uni-padding-wrap{
		width: 750px;
		height: auto;
		padding: 0;
		display: flex;
		background: white;
	}
	#paymoney .uni-form-item {
		width: 690px;
		margin: 0 30px;
		display: block;
		float:left;
		border-bottom: 1px solid #eeeeee;
	}
	#paymoney .uni-form-item:last-child{
		border-bottom:none;
	}
	#paymoney .title {
		width: 30%;
		float: left;
		display: inline;
		padding-left: 0;
		line-height: 52px;
	}
	#paymoney .beizhu{
		width: 20%;
	}
	#paymoney .uni-column .uni-input {
		float: left;
		margin-top: 6px;
		display: inline;
	}
	#paymoney .right_text{
		float: right;
		margin-top: 28px;
	}
	.pay_alert {
		height: 60px;
		line-height: 60px;
		padding: 0 30px;
		background: #F4F4F4;
		font-size: 24px;
		display: flex;
		justify-content: space-between;
		span{
			color: #f92028;
			font-size: 30px;
		}
		.firstmoney{
			color: #f92028;
		}
	}
	.payways_ul {
		padding: 15px 30px;
		margin-bottom: 20px;
		width: 92%;
		height: auto;
		float: left;
	}
	.payways_ul li {
		width: 216px;
		height: 120px;
		float: left;
		font-size: 36px;
		line-height: 120px;
		text-align: center;
		margin-left: 15px;
		margin-top: 15px;
		background: rgba(255, 255, 255, 1);
		border: 2px solid #eeeeee;
		border-radius: 10px;
		position: relative;
	}
	.payways_ul li:nth-child(3n+1) {
		margin-left: 0;
	}
	.payways_ul li span {
		font-size: 24px;
	}
	.payways_ul .moneyd {
		color: #FF6900;
		border: 2px solid #FF6900;
	}
	.payways_ul li .iconjiaobiao {
		position: absolute;
		right: -1px;
		top: 35%;
		font-size: 40px;
		display: none;
	}
	.payways_ul .moneyd .iconjiaobiao {
		display: block;
	}
	#paymoney .uni-form-item .sellernote{
		float: left;
		width: 65%;
		margin-top: 3%;
		height: 100px;
		padding: 5px;
		border: 1px solid #6666;
	}
	.applypay {
		width: 95%;
		height: 100px;
		color: #3A1B04;
		font-size: 30px;
		margin-left: 2.5%;
		margin-top: 30px;
		border-radius: 45px;
		text-align: center;
		line-height: 100px;
		text-align: center;
		background: #FFD11A;
	}
	.rule {
		color: #999999;
		padding: 30px;
		line-height: 40px;
	}
</style>
